<template>
  <div class="appp">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <head-view :title="title" :time="time"/>
        </div>
        <div class="content-root">
          <a-row :gutter="3" class="up">
            <a-col :span="7" style="height:100%">
              <sum-info-left />
              <div class="production-info" style="margin-top: 1vh;">
                <dv-border-box-8 style="padding-top: 6px;" :reverse="true">
                  <remove-shelves type="up" ref="removeShelvesUpRef"/>
                </dv-border-box-8>

              </div>
            </a-col>
            <a-col :span="10" style="height:100%">
                <dv-border-box-12 class="srock-list-root">
                  <div class="mod-title">设备生产情况</div>
                  <stock-list ref="stockListRef"/>
                </dv-border-box-12>
            </a-col>

            <a-col :span="7" style="height:100%">
              <sum-info-right />
              <div class="production-info" style="margin-top: 1vh;">
                <dv-border-box-8 style="padding-top: 6px;" >
                  <remove-shelves type="down" ref="removeShelvesDownRef"/>
                </dv-border-box-8>

              </div>
            </a-col>
          </a-row>
          <a-row :gutter="3" class="up" style="margin-top:0.5vh">
            <a-col :span="7" style="height:100%">
              <dv-border-box-2 class="footer-view ">
                <income-chart ref="incomeChartRef"/>
              </dv-border-box-2>
            </a-col>

            <a-col :span="10" style="height:100%">

              <dv-border-box-1 class="footer-view ">
                <material-receive ref="materialReceiveRef"/>
              </dv-border-box-1>
            </a-col>
            <a-col :span="7" style="height:100%">
              <dv-border-box-6 class="footer-view ">
                <use-chart ref="useChartRef"/>
              </dv-border-box-6>
            </a-col>
          </a-row>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import HeadView from '../../plugins/Head/index.vue'
import stockList from './modules/stockList.vue'
import sumInfoLeft from './modules/sumInfoLeft.vue'
import sumInfoRight from './modules/sumInfoRight.vue'
import removeShelves from './modules/removeShelves.vue'
import moment from 'moment'
import incomeChart from './modules/incomeChart.vue'
import useChart from './modules/useChart.vue'
import materialReceive from './modules/materialReceive.vue'


export default {
  name: 'App',
  components: {
    stockList,
    HeadView,
    sumInfoLeft,
    sumInfoRight,
    removeShelves,
    incomeChart,
    useChart,
    materialReceive
  },
  data() {
    return {
      title: '仓库监控实时看板',
      timeInterval: null,
      timeIndex: 0,
      time: moment().format('YYYY-MM-DD HH:mm')
    }
  },
  created() {
    this.setTime()

  },
  mounted() {
    const _that = this
    this.timeInterval = setInterval(() => {
      _that.timeIndex++
      if(_that.timeIndex > 3) {
        _that.getData()
        _that.$childrentimeIndex = 0
      }
      _that.setTime()
    }, 1000 * 60)
    setTimeout(() => {
      _that.getData()
    }, 200);

  },


  methods: {
    getData() {
      this.$refs.removeShelvesUpRef.getData()
      this.$refs.stockListRef.getData()
      this.$refs.removeShelvesDownRef.getData()
      this.$refs.incomeChartRef.getData()
      this.$refs.materialReceiveRef.getData()
      this.$refs.useChartRef.getData()
    },
    setTime() {
      const _that = this
      _that.time = moment().format('YYYY-MM-DD HH:mm')
      const weekDay = moment().day()

      switch(weekDay) {
        case 0:
         _that.time = `${_that.time} 星期日`
          break
        case 1:
         _that.time = `${_that.time} 星期一`
          break
        case 2:
         _that.time =  `${_that.time} 星期二`
          break
        case 3:
         _that.time = `${_that.time} 星期三`
          break
        case 4:
         _that.time = `${_that.time} 星期四`
          break
        case 5:
        _that.time = `${_that.time} 星期五`
          break
        case 6:
        _that.time = `${_that.time} 星期六`
          break
      }
    },
    destroyed() {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    },
  },
}
</script>

<style lang="less" scoped>
.appp {
  font-family: 'MicrosoftYaHei', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  // padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}
.content-root {
  height: 93vh;
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 1vh;
}
.footer-view {
  height: 33.5vh;
}
.production-info {
  height: 41vh;
}
.warrper ::v-deep .dv-border-box-7 .border-box-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.srock-list-root {
  height: 58vh;
}
.left {
  padding: 0px 15px;
  .px2vh(line-height, 48);
  text-align: left;
  .px2font(13);
  .anticon {
    .px2font(20);
    vertical-align: middle;
  }
}
.mod-title {
  .px2font(24);
  .px2vh(padding-top, 8);
  .px2vw(padding-left, 15);
  .px2vh(padding-bottom, 8);
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
  background: linear-gradient(
    to right,
    rgba(21, 60, 160, 0.05),
    rgba(29, 62, 208, 0.3) 50%,
    rgba(21, 60, 160, 0.05)
  );
}

.warrper ::v-deep .dv-scroll-board .rows .ceil {
  .px2font(14) !important;
  color: #eee;
}

.warrper ::v-deep .dv-scroll-board .header .header-item {
  .px2font(16) !important;
}
.warrper ::v-deep .ant-fullcalendar-header {
  padding: 5px 16px 5px 0;
}

</style>
